<template>
  <div class="user-box">
    <van-nav-bar title="我的" left-arrow @click-left="$router.back()">
      <template #right>
        <van-icon name="ellipsis" />
      </template>
    </van-nav-bar>
    <div class="header">
      <p>昵称:{{ userInfo.nickName }}</p>
      <p>登录名:{{ userInfo.loginName }}</p>
      <p>个性签名:{{ userInfo.introduceSign }}</p>
    </div>
    <ul class="my-ul">
      <li class="my-li" @click="clickOrder">
        <div>我的订单</div>
        <div><van-icon name="arrow" /></div>
      </li>
      <li class="my-li">
        <div>账号管理</div>
        <div><van-icon name="arrow" /></div>
      </li>
      <li class="my-li" @click="clickAddress">
        <div>地址管理</div>
        <div><van-icon name="arrow" /></div>
      </li>
      <li class="my-li">
        <div>关于我们</div>
        <div><van-icon name="arrow" /></div>
      </li>
    </ul>
  </div>
</template>

<script>
//APIgetUserInfo
import { APIgetUserInfo } from "@/http/index.js";
export default {
  name: "User",
  props: [],
  data() {
    return {
      userInfo: {},
    };
  },
  created() {
    APIgetUserInfo().then((res) => {
      //console.log(res)
      if (res.resultCode == 200) {
        this.userInfo = res.data;
      }
    });
  },
  methods: {
    clickOrder() {
      this.$router.push("/myorder");
    },
    clickAddress() {
      this.$router.push("/addressList");
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.user-box {
  width: 90%;
  //background-color:red;
  margin: 0 auto;
}
.header {
  width: 100%;
  height: 100px;
  background-color: #46c2c2;
  border-radius: 10px;
  box-sizing: border-box;
  padding-left: 20px;
}
.my-ul {
  .my-li {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20px 10px;
    border-bottom: 1px solid #ccc;
  }
}
</style>
